<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';

const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();

// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([
    {
      type: "datePicker",
      prop: ["createStartTime", "createEndTime"],
      startPlaceholder: "创建开始时间",
      endPlaceholder: "创建结束时间",
      label: "",
      model: [],
    },
    {
      type: "input",
      prop: "name",
      placeholder: "订单号",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "下单门店",
        label: '',
        prop: 'source1',
        data:[
            {
                label:"收入",
                value:1
            },
            {
                label:"卖出",
                value:2
            }
        ],
        model: "",
    },
])

const btnLefts = ref([
    {
        label: "导出",
        plain: false,
        show: true,
        img: new URL("@/assets/icon/btn-export.png", import.meta.url),
        style: "border-color:#0C268C;color:#0C268C",
        click: async () => {
        //
        },
    },
])
const btnRights = ref([
])

const tableConfig = ref([
    {
      prop: "label",
      label: "订单号",
      width:200
    },
    {
      prop: "layer",
      label: "实付金额",
      width:200
    },
    {
      prop: "layer",
      label: "支付手续费",
      width:200
    },
    {
      prop: "layer",
      label: "优惠金额",
      width:200
    },
    {
      prop: "layer",
      label: "实收金额",
      width:200
    },
    {
      prop: "layer",
      label: "下单门店",
      width:400
    },
    {
      prop: "layer",
      label: "时间",
      width:250
    },


    {
      type: "action",
      label: "操作",
      width: 100,
      btns: [
      {
          label: () => "详情",
          type:"primary",
          click: async (row) => {
            summaryDetailFlag.value = true;
          },
        },
      ],
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        
        totalPage.value = 100;
        tableData.value = [
            {
                "doctorNumberCode": "YS000299",
                "type": "审方",
                "name": "12313",
                "mobile": "18207123212",
                "idCard": "",
                "frontUrl": "https://static.91medicine.net/images/20230919/2930e77d-fba7-4a7e-bbc4-f6815eca5a6d.jpg",
                "headUrl": "https://static.91medicine.net/images/20230919/f6159f8e-c44a-43cc-ae5c-3ddfc659cd7a.jpg",
                "introduce": "3123",
                "institutions": "九为（浙江）网络科技有限公司",
                "certificateUrl": "https://static.91medicine.net/images/20230919/d5e597c3-1c76-4646-a843-03b0b8686a03.jpg",
                "certificateNo": "312312",
                "titleValue": "",
                "uuid": "8a69c4628aab7785018aac0eb31f0004",
                "state": 1,
                "sfdaDoctorType": "1",
                "storeLocationUuid": "",
                "source": "3"
            },
            {
                "doctorNumberCode": "YS000299",
                "type": "审方",
                "name": "12313",
                "mobile": "18207123212",
                "idCard": "",
                "frontUrl": "https://static.91medicine.net/images/20230919/2930e77d-fba7-4a7e-bbc4-f6815eca5a6d.jpg",
                "headUrl": "https://static.91medicine.net/images/20230919/f6159f8e-c44a-43cc-ae5c-3ddfc659cd7a.jpg",
                "introduce": "3123",
                "institutions": "九为（浙江）网络科技有限公司",
                "certificateUrl": "https://static.91medicine.net/images/20230919/d5e597c3-1c76-4646-a843-03b0b8686a03.jpg",
                "certificateNo": "312312",
                "titleValue": "",
                "uuid": "8a69c4628aab7785018aac0eb31f0004",
                "state": 1,
                "sfdaDoctorType": "1",
                "storeLocationUuid": "",
                "source": "3"
            },
        ];
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const img1 = ref(new URL("@/assets/images/login-bg3.png",import.meta.url))
const goToDetail = (uuid)=>{
  router.push({name:"ProjectManagementDetail",query:{uuid:uuid}})
}
const summaryDetailFlag = ref(false);
const totalPageOrder = ref(100)
const page = reactive({
    pageSize: 10,
    layout: "prev, pager, next",
    currentPage: 1,
    total: 0,
})

const handlerSearchOrder = async (formInline)=>{
    tableLoading.value = true;
    try{
        

        tableData.value = [];
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"
        >
        </SeachTable>
        <el-drawer
            v-model="summaryDetailFlag"
            title="订单详情"
            direction="rtl"
            width="600px"
        >
            <div class="info-contain">
                <div class="detail-summary">
                    <div class="lis">
                        <div class="lis-line">
                            <div class="line-lable">
                                订单号：
                            </div>
                            <div class="line-info">
                                KD2021080900001
                            </div>
                        </div>
                    </div>
                    <div class="lis">
                        <div class="lis-line">
                            <div class="line-lable">
                                下单门店：
                            </div>
                            <div class="line-info">
                                门店名称门店名称门店名称门店名称门店名称门店名称门店名称门店名称门店名称
                            </div>
                        </div>
                    </div>
                    <div class="lis">
                        <div class="lis-line">
                            <div class="line-lable">
                                实付金额：
                            </div>
                            <div class="line-info">
                                10
                            </div>
                        </div>
                    </div>
                    <div class="lis">
                        <div class="lis-line">
                            <div class="line-lable">
                                支付手续费：
                            </div>
                            <div class="line-info">
                                10
                            </div>
                        </div>
                    </div>
                    <div class="lis">
                        <div class="lis-line">
                            <div class="line-lable">
                                优惠金额：
                            </div>
                            <div class="line-info">
                                10
                            </div>
                        </div>
                    </div>
                    <div class="lis">
                        <div class="lis-line">
                            <div class="line-lable">
                                实收金额：
                            </div>
                            <div class="line-info">
                                10
                            </div>
                        </div>
                    </div>
                </div>
                <el-table :data="tableData" style="width: 100%" stripe>
                    <el-table-column prop="name" label="商品名称" width="300">
                        <template #default="scoped">
                            <div class="project-info">
                                <div class="name-info">
                                    <div class="p1">
                                        项目名称
                                    </div>
                                    <div class="p2">
                                        <span>15g*6袋</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="单价"></el-table-column>
                    <el-table-column prop="name" label="数量"></el-table-column>
                    <el-table-column prop="name" label="实收"></el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                        :current-page="page.currentPage"
                        :layout="page.layout"
                        :page-size="page.pageSize"
                        :total="totalPageOrder"
                        background
                        @current-change="handlerSearchOrder">
                    </el-pagination>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<style lang="less" scoped>
.page{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-top:16px;

}
.project-info{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .name-info{
        width:calc(100%);
        box-sizing: border-box;

        .p1{
            width: 100%;
            color: #222222;
            font-weight: bold;
            line-height: 14px;
            font-size: 14px;

        }
        .p2{
            width: 100%;
            margin-top:8px;
            color: #666666;
            line-height: 16px;
            font-size: 14px;
        }
    }
}
.info-contain{
    width: 100%;
    :deep(.el-table__inner-wrapper::before){
        display:none;
    }
    :deep(.el-table th.el-table__cell){
        background: #EBEBEB;
    }
    :deep(.el-table){
        border:1px solid #E3E3E3;
    }

    :deep(.el-table th > .cell){
        border-right: 0;;
    }
    .detail-summary{
        display: flex;
        padding-top:12px;
        justify-content: flex-start;
        flex-wrap: wrap;
        .lis{
            width: 50%;
            .lis-line{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                margin-bottom:12px;
                .line-lable{
                    width: 84px;
                    line-height: 20px;
                    font-size: 14px;
                    color: #222222;
                    text-align: right;
                }
                .line-info{
                    width: calc(100% - 84px);
                    font-size: 14px;
                    color: #222222;
                    display: flex;
                    justify-content: flex-start;
                    word-break: break-all;
                    word-wrap: break-word;
                    line-height: 20px;
                }
            }
        }
    }
}
</style>